<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="90%">
		<el-col v-if="queryParams.status === 1" :span="1.5">
			<el-button @click="onExportOrders(2)" type="warning" plain icon="el-icon-download">导出成功订单</el-button>
		</el-col>
		<el-col v-if="queryParams.status === 2" :span="1.5">
			<el-button @click="onExportOrders(1)" type="warning" plain icon="el-icon-download">导出失败订单</el-button>
		</el-col>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="订单编号" align="center" prop="order_sn" />
			<el-table-column label="快递公司" align="center" prop="freight_name" />
			<el-table-column label="快递编码" align="center" prop="freight_number" />
			<el-table-column label="快递单号" align="center" prop="freight_sn" />
			<el-table-column label="备注" align="center">
				<template #default="scope">
					<el-tooltip v-if="scope.row.remarks" effect="light" :content="scope.row.remarks" placement="top">
						<el-button>查看</el-button>
					</el-tooltip>
					<span v-else>----</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" prop="status" :formatter="formatterStatus" />
			<el-table-column label="写入时间" align="center" prop="time" :formatter="formatTime" />
			<el-table-column label="读取时间" align="center" prop="read_time" :formatter="formatReadTime" />
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import { orderImportJournalLog, orderExportSendFail } from '/@/api/admin1';
import { ElLoading } from 'element-plus';
import { handleDownloadByName } from '/@/utils/utils';

export default {
	name: 'viewOrrderCourierDialog',
	setup() {
		const state = reactive({
			title: '查看订单快递',
			open: false,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				file_log_id: '',
				status: 1,
			},
			tableList: [],
			loading: false,
			total: 20,
		});

		const formRef = ref(null);
		const loadingDownloadRef = ref(null);
		let start_page: number = 1; // 导出失败订单默认页数
		let start_page_total: number = 1; // 导出失败订单总页数

		/********** 点击事件(on开头) **********/
		// 导出失败订单
		const onExportOrders = (status: any) => {
			(loadingDownloadRef.value as any) = ElLoading.service({
				lock: true,
				text: '正在导出，请耐心等待...',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			_orderExportSendFail({ start_page: 1, file_log_id: state.queryParams.file_log_id, status: status });
		};
		/********** 方法事件 **********/
		// 状态数据字典
		const formatterStatus = (row: any) => {
			switch (row.status) {
				case 0:
					return '待读取';
				case 1:
					return '已读取';
				case 2:
					return '成功';
				case 3:
					return '异常';
				default:
					return '未知错误';
			}
		};
		// 写入时间字典
		const formatTime = (row: any) => {
			return timeDictionary(row.time);
		};
		// 录入时间字典
		const formatReadTime = (row: any) => {
			return timeDictionary(row.time);
		};
		//打开
		const openDialog = (config: any) => {
			console.log(config);
			reset();
			state.open = true;
			state.queryParams.file_log_id = config.id;
			state.queryParams.status = config.status;
			getList();
		};
		// 表单重置
		const reset = () => {
			start_page = 1;
			start_page_total = 1;
			state.queryParams = {
				file_log_id: '',
				status: 0,
				pageNum: 1,
				pageSize: 10,
			};
			(formRef.value as any)?.resetFields();
		};
		const getList = () => {
			state.loading = true;
			_orderImportJournalLog(state.queryParams);
		};

		/********** 网络请求 **********/
		// 发货记录
		const _orderImportJournalLog = (_data: object) => {
			orderImportJournalLog(_data)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		// 导出待发货文件
		const _orderExportSendFail = (_data: any) => {
			if (start_page <= start_page_total) {
				orderExportSendFail(_data)
					.then((res: any) => {
						start_page == 1 && (start_page_total = res.data.info.count_page);
						start_page++;
						handleDownloadByName(res.data.info.url, '到发货订单导出', false);
						_orderExportSendFail({ start_page: 1, file_log_id: state.queryParams.file_log_id });
						if (start_page >= start_page_total) {
							(loadingDownloadRef.value as any)?.close();
							start_page = 1;
							start_page_total = 1;
						}
					})
					.catch(() => {
						(loadingDownloadRef.value as any)?.close();
						start_page = 1;
						start_page_total = 1;
					});
			}
		};

		return {
			loadingDownloadRef,
			formRef,
			openDialog,
			formatterStatus,
			onExportOrders,
			formatTime,
			formatReadTime,
			getList,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
